<script setup lang="tsx">
import {Dialog} from "@/components/Dialog";
import {useValidator} from "@/hooks/web/useValidator";
import {FormSchema} from "@/components/Form";
import Form from "@/components/Form/src/Form.vue";
import {propTypes} from "@/utils/propTypes";
import {computed, PropType, ref, useAttrs} from "vue";
import {PictureClassPatientType} from "@/api/pictureClass/types";
import {ElSpace, ElDivider, ElMessage} from 'element-plus'
import {getImgPath} from "@/utils/image";
import {PictureType} from "@/api/picture/types";
import {useForm} from "@/hooks/web/useForm";
const props = defineProps({
  modelValue: propTypes.bool.def(false),
  group: Array as PropType<Array<PictureClassPatientType>>,
  printLoading: propTypes.bool.def(false),
})
const getBindValue = computed(() => {
  const delArr: string[] = ['group']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})
const {required} = useValidator()
const descType: any[] = [
  {label: '医保', value: 1},
  {label: '个人', value: 2},
  {label: '查询', value: 3},
  {label: '其他', value: 4},
]

const { formRegister, formMethods } = useForm()
const { getFormData, getElFormExpose } = formMethods

const schema: FormSchema[] = [
  {
    field: 'desc',
    label: '用途',
    component: 'Select',
    componentProps: {
      options: descType
    },
    formItemProps: {
      rules: [required()]
    }
  },
  {
    field: 'use_user',
    label: '申请打印人姓名',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    }
  },
]
const showGroup = computed(()=>{
  return props.group.filter(item=>item.pictures)
})
const checkedID = ref<number[]>([])
const checkImg = (img: PictureType)=>{
  if(checkedID.value.includes(img.id)){
    checkedID.value = checkedID.value.filter(id=>id !== img.id)
  }else{
    checkedID.value.push(img.id)
  }
}

const emits = defineEmits(['confirm'])
const submit = async()=>{
  const elFormExpose = await getElFormExpose()
  if (!elFormExpose) return
  const valid = await elFormExpose?.validate().catch((err) => {
    ElMessage.warning('请将信息填写完整')
    return
  })
  // 判断用户是否选中图片
  if(checkedID.value.length === 0){
    ElMessage.warning('请选择要打印的病历')
    return
  }
  if (valid) {
    const formData = await getFormData()
    emits('confirm', {
      ...formData,
      pictures: checkedID.value
    })
  }
}
</script>

<template>
  <Dialog
      v-bind="getBindValue"
      width="700px"
      title="打印病历"
  >
    <Form
        :schema="schema"
        @register="formRegister"
    >
    </Form>
    <h3>请选择要打印的病历</h3>
    <div class="Pics">
      <div class="item" v-for="item in showGroup" :key="item.id">
        <h4>{{item.name}}</h4>
        <ElSpace wrap size="large">
          <span :class="{img: true, checked: checkedID.includes(img.id)}" v-for="img in item.pictures" @click="checkImg(img)">
            <img :src="getImgPath(img.url)" alt="" :key="img.id"/>
          </span>
        </ElSpace>
        <ElDivider/>
      </div>
    </div>
    <template #footer>
      <BaseButton type="primary" @click="submit" :loading="printLoading">确认打印</BaseButton>
    </template>
  </Dialog>
</template>

<style scoped lang="less">
.item{
  h4{
    margin: 20px 0;
  }
  .img{
    width: 100px;
    height: 100px;
    position: relative;
    &.checked:before{
      content: "已选中";
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,0.5);
      color: #fff;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>